<template>
  <div class="flopCard">
    <infoText ref="infoText"></infoText>
    <div class="part0">
      <image class="part01" src="./img/1.png"></image>
      <div class="part02">金牌大师送好礼</div>
      <div class="myLine">
        <div class="myLine1">欢乐100%，中奖翻不停</div>
        <div class="myLine2"></div>
      </div>
    </div>
    <div class="part1">
      <swiper
        @change="swiperChange"
        previous-margin="150rpx"
        next-margin="150rpx"
        class="part1-swiper"
        :indicator-dots="false"
        :circular="true"
        :autoplay="false"
      >
        <swiper-item class="part1-item" v-for="(item, index) in cardList" :key="index">
          <div class="flip-box" :class="current === index ? 'flip-box1' : ''" @click="flopCardBtn(item, index)">
            <div class="flip-item" :class="item.show ? 'flip-item-front-hover' : 'flip-item-front'">
              <div class="flip-item1">
                <image class="flip-img" :src="item.img"></image>
                <span class="flip-text">点击翻牌</span>
              </div>
            </div>
            <div class="flip-item" :class="item.show ? 'flip-item-back-hover' : 'flip-item-back'">
              <div class="flip-item2">
                <span>恭喜获得1元立减金</span>
              </div>
            </div>
          </div>
        </swiper-item>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cardList: [
        { show: false, img: require('./img/c1.png') },
        { show: false, img: require('./img/c2.png') },
        { show: false, img: require('./img/c3.png') },
        { show: false, img: require('./img/c1.png') },
        { show: false, img: require('./img/c2.png') },
        { show: false, img: require('./img/c3.png') },
      ],
      current: 0,
    }
  },
  methods: {
    flopCardBtn(item, index) {
      if (this.current === index) {
        item.show = true
      }
    },
    swiperChange(i) {
      this.current = i.detail.current
    },
  },
}
</script>

<style lang="scss" scoped>
.flopCard {
  background: radial-gradient(circle at 50% 50%, #f78684 20%, #c80722 100%);
  background-size: 100% 100%;
  min-height: 100vh;
  .myLine {
    line-height: 80rpx;
    text-align: center;
    color: #fff;
    width: 600rpx;
    height: 80rpx;
    margin: 0 auto;
    background-color: #d08931;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-size: 40px 40px;
    animation: animate 3s linear infinite;
    position: relative;
    border-radius: 80rpx;
  }

  @keyframes animate {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: 60px 0;
    }
  }
  .myLine1 {
    &:before {
      content: '';
      display: block;
      top: 30rpx;
      left: 30rpx;
      width: 20rpx;
      height: 20rpx;
      position: absolute;
      background: #fff;
      transform: rotate(45deg);
    }
    &:after {
      content: '';
      display: block;
      top: 30rpx;
      right: 30rpx;
      width: 20rpx;
      height: 20rpx;
      position: absolute;
      background: #fff;
      transform: rotate(45deg);
    }
  }
  .myLine2 {
    &:before {
      content: '';
      display: block;
      position: absolute;
      width: 90rpx;
      height: 90rpx;
      position: absolute;
      top: -8rpx;
      left: -30rpx;
      border-left: 10rpx solid #d08931;
      border-top: 10rpx solid #d08931;
      transform: rotate(-45deg);
    }
    &:after {
      content: '';
      display: block;
      position: absolute;
      width: 90rpx;
      height: 90rpx;
      position: absolute;
      top: -8rpx;
      right: -30rpx;
      border-right: 10rpx solid #d08931;
      border-top: 10rpx solid #d08931;
      transform: rotate(45deg);
    }
  }
  .part0 {
    height: 600rpx;
    position: relative;
    .part02 {
      font-size: 90rpx;
      margin-bottom: 50rpx;
      font-weight: bold;
      padding-top: 250rpx;
      text-align: center;
      color: #fff;
      text-shadow: 4px 4px 0 #d08931, 4px -4px 0 #d08931, -4px -4px 0 #d08931, -4px 4px 0 #d08931, 4px 3px 0 #d08931,
        4px -3px 0 #d08931, -4px -3px 0 #d08931, -4px 3px 0 #d08931, 4px 2px 0 #d08931, 4px -2px 0 #d08931,
        -4px -2px 0 #d08931, -4px 2px 0 #d08931, 4px 1px 0 #d08931, 4px -1px 0 #d08931, -4px -1px 0 #d08931,
        -4px 1px 0 #d08931, 4px 0px 0 #d08931, 4px 0px 0 #d08931, -4px 0px 0 #d08931, -4px 0px 0 #d08931,
        3px 4px 0 #d08931, 3px -4px 0 #d08931, -3px -4px 0 #d08931, -3px 4px 0 #d08931, 3px 3px 0 #d08931,
        3px -3px 0 #d08931, -3px -3px 0 #d08931, -3px 3px 0 #d08931, 3px 2px 0 #d08931, 3px -2px 0 #d08931,
        -3px -2px 0 #d08931, -3px 2px 0 #d08931, 3px 1px 0 #d08931, 3px -1px 0 #d08931, -3px -1px 0 #d08931,
        -3px 1px 0 #d08931, 3px 0px 0 #d08931, 3px 0px 0 #d08931, -3px 0px 0 #d08931, -3px 0px 0 #d08931,
        2px 4px 0 #d08931, 2px -4px 0 #d08931, -2px -4px 0 #d08931, -2px 4px 0 #d08931, 2px 3px 0 #d08931,
        2px -3px 0 #d08931, -2px -3px 0 #d08931, -2px 3px 0 #d08931, 2px 2px 0 #d08931, 2px -2px 0 #d08931,
        -2px -2px 0 #d08931, -2px 2px 0 #d08931, 2px 1px 0 #d08931, 2px -1px 0 #d08931, -2px -1px 0 #d08931,
        -2px 1px 0 #d08931, 2px 0px 0 #d08931, 2px 0px 0 #d08931, -2px 0px 0 #d08931, -2px 0px 0 #d08931,
        1px 4px 0 #d08931, 1px -4px 0 #d08931, -1px -4px 0 #d08931, -1px 4px 0 #d08931, 1px 3px 0 #d08931,
        1px -3px 0 #d08931, -1px -3px 0 #d08931, -1px 3px 0 #d08931, 1px 2px 0 #d08931, 1px -2px 0 #d08931,
        -1px -2px 0 #d08931, -1px 2px 0 #d08931, 1px 1px 0 #d08931, 1px -1px 0 #d08931, -1px -1px 0 #d08931,
        -1px 1px 0 #d08931, 1px 0px 0 #d08931, 1px 0px 0 #d08931, -1px 0px 0 #d08931, -1px 0px 0 #d08931,
        0px 4px 0 #d08931, 0px -4px 0 #d08931, 0px -4px 0 #d08931, 0px 4px 0 #d08931, 0px 3px 0 #d08931,
        0px -3px 0 #d08931, 0px -3px 0 #d08931, 0px 3px 0 #d08931, 0px 2px 0 #d08931, 0px -2px 0 #d08931,
        0px -2px 0 #d08931, 0px 2px 0 #d08931, 0px 1px 0 #d08931, 0px -1px 0 #d08931, 0px -1px 0 #d08931,
        0px 1px 0 #d08931, 0px 0px 0 #d08931, 0px 0px 0 #d08931, 0px 0px 0 #d08931, 0px 0px 0 #d08931, 0 0 0 #d08931;
    }
    .part01 {
      position: absolute;
      top: 100rpx;
      right: 30rpx;
      width: 62rpx;
      height: 105rpx;
    }
  }
  .part1 {
    .part1-swiper {
      height: 600rpx;
    }
    .flip-item1,
    .flip-item2 {
      font-size: 60rpx;
      color: #000;
      width: 100%;
      height: 100%;
      background: #d08931;
      border-radius: 30rpx;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      position: relative;
    }
    .flip-item2 {
      background: #999;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .flip-img {
      width: 100%;
      height: 100%;
      border-radius: 30rpx;
      overflow: hidden;
    }
    .flip-text {
      position: absolute;
      bottom: 100rpx;
      left: 0;
      width: 100%;
      text-align: center;
      font-size: 40rpx;
    }
    .flip-box {
      position: relative;
      width: 100%;
      margin: 0 auto;
      height: 600rpx;
      overflow: hidden;
      transform: scale(0.7);
      transition: all 0.3s;
      transform-origin: 50% 50%;
    }
    .flip-box1 {
      transform: scale(1);
    }
    .flip-item {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      transition: all 0.5s ease-in-out;
      transform-style: preserve-3d;
      backface-visibility: hidden;
    }
    .flip-item-front {
      transform: rotateY(0deg);
      z-index: 2;
    }
    .flip-item-back {
      transform: rotateY(180deg);
      z-index: 1;
    }
    .flip-box .flip-item-front-hover {
      z-index: 1;
      transform: rotateY(180deg);
    }
    .flip-box .flip-item-back-hover {
      z-index: 2;
      transform: rotateY(0deg);
    }

    @keyframes rotate {
      0% {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, 0deg);
      }
      100% {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, 360deg);
      }
    }
  }
}
</style>
